import React from 'react';
import cn from 'classnames';
import s from './style.module.css';
import { Link } from 'react-router-dom';


const BreadCrumbBox = (props) => {
  const { arr, children, className } = props;
  return (
    <div className={cn(s.breadcrumbBox, className)}>
      <div>
        <ul className={s.breadcrumb}>
          {arr.map((item) => (
            <li className={item.active ? s.active : ''} key={item.name}>
              {item.link ? <Link to={item.link} className='cp'>{item.name}</Link> : item.name}
            </li>
          ))}
        </ul>
      </div>
      <div className={s.rightTotal}>{children}</div>
    </div>
  );
};

export default BreadCrumbBox;
